<template>
    <FrameWork></FrameWork>
    <ContentField>
        <h2 style="text-align:center;">添加修改类题目</h2>
        <form @submit.prevent="addProblem">
            <div class="mb-3">
                <label  class="form-label">题目类型:</label>
                <span type="text" class="form-control" name="proType" id="proType" :value="proType">{{ proType }}</span>
            </div>
            <div class="mb-3">
                <label  class="form-label">题目描述:</label>
                <input type="text" v-model="content" class="form-control" name="content" id="content" required>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">正确的SQL语句:</label>
                <input type="text" v-model="correctSQL" class="form-control" name="correctSQL" id="correctSQL" required>
            </div>
            <span style="color:red; text-align:center; display:block;">{{ error_message }}</span>
            <div class="form-group" style="text-align:center;">
                <button class="btn btn-primary" type="submit" style="width:20%;margin-top:10px;">添加题目</button>
            </div>
        </form>
    </ContentField>
</template>

<script>
import FrameWork from '@/components/admin/FrameWork.vue';
import ContentField from '@/components/commons/ContentField.vue';
import {ref} from 'vue';
import $ from 'jquery';
import {useStore} from 'vuex';
import router from '@/router/index';


export default{
    name:'AddUpdateProView',
    components:{
        FrameWork,
        ContentField,
    },
    setup(){
        const store = useStore();


        let proType = 3;
        let content = ref('');
        let correctSQL = ref('');
        let error_message = ref('');

        const addProblem = () => {

            // console.log("content:");
            // console.log(content.value);
            // console.log("correctSQL:");
            // console.log(correctSQL.value);

         $.ajax({
            url: 'http://localhost:8090/sls/defaultProSet/addPro',
            type: 'post',
            data: {
                proType: proType,
                content: content.value,
                correctSQL: correctSQL.value,
            },
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                console.log(resp);
                if(resp.error_message === 'success'){
                    router.push({name: 'A_updateSet', params: {proType:3}});
                }
                else{
                    error_message.value = resp.error_message;
                }
            },
            error(resp){
                console.log(resp);
            }
         })   


        }

        return {
            addProblem, 
            proType,
            content,
            correctSQL,
            error_message,
        }

    }
}
</script>

<style scoped>
</style>
